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Css language 
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,S AjLu 

**«* 


(jL Ö JfrL* J ö J J a£ (^Lj^ c£jU 

^alj öLj Aj ^ ^J AlLoî Aj I j Aj JJ 4£ji} ^Jjuj öJ ö jlj ÖJ 4uuJ a1 J Aj j ^ jjj AA 

j Ö J Aj I J Aj djj A£jjj ^JjuJ öJ lû CjjL^J A£ (J öjl£ J Aj J <JUJ <S jb <J (J j£ j jjjJ 

Clinj öû jl5o jjj a£j <juj (j a£j j] 

L? ö jtjj î ySuuJ 4-lJj (^JLj^JjujjjL (J ö jljj öL Aj jn^S ^aJjl jJ A£ ^aJl ^ui ji. J jj 

ÖjbjjL I J J^, ^jI jJJjoJ <J JJ ^^jU. öj A£j jIj Aj (J j OJj A£ J <juj <J (JjLo jA (^jLg j 
Ö jl£ ^ Aj A£j j^ C*nLj 4-yj (^iLj£ OJjujjjL (J ö jLj öL JJ (^£inj£ ^jjjuJ Jj Aj Lj£ ^Jjuj öL 
Aj cijLjjJuJ ÖJ J AA ÖJ (jLjj^ (^JJJJji (^jLg j Aj jl^ öjl^j 4uuJ (^JjjJ LLj j jA Ajjj öL 
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Css language 


Al CIujjj (j^jj£ 4 \\ ^ 4£ Cujj 4^a öj <*— ujj 4£ (JjUjIj j Cl L oijI j Jjjj Jj 

j ûj <j c£jjVj (jU uiji a£ ^i jj 4 j*k j 4j^ 4 £j j^. uijji jj jj-ö aa (j ö jWj 
Lli^j jjljJJ J (JjI£j jIjjjA <J j 4 J 4£ j Aj A£lj jU AjL£j L$ jj/ujjj J Cl UJ Aj jilj 

. Û ^? Û^' J Û^j£-jh? J ^ C5^jJj'j J <J 6J j? ÛW^? f J Aj 

4j tJlilûj 'û clilû oû (Jj AA jlj dilû eJ 4 j i^ÎjjI£ t£lul£ L_ajj^ jLa j5Ûj 6 j 

ISUj j <juj Ajjj a£ c^jjuj <j j <j j AA AlLmJjlj L^. CIjjj öû Cliuj <j j <j jj jL j£uj I j 

Û^? J' j J ^ ^? J (Û?J op'j^ û'-* 

<£ 4ujj£ j ^ 4£ j 4Jk j 4£ 4u öj öj^j£ ö^LûU CLloiJj 4uoj j£ (j 0 jjj jj 4jjl£ j 4u j>a öj 
j 4J> 4£j j^. jjjjaj 4jIj ^l jjA I j 4u j l£ 4 j 4uU ^^j^ jjjU 4J jU CIuj AA U 4£ 4ul£ 4J 
^UJ 4u cJ 4u 4j 4Jfc 4£ 4u 4.A (j 0 j 4u (j j 4£ 4u I j 4u CuU ^Uj 4u UÎjjI£ U1jjI£ Uliuj 4£ 

uIjjj jjuj 4 J jLLuj öj 4 J öji£U jU jl5U AJti 0 j CuIaj 

jjUil jAx^a uu 

û' J>*1 <_sj£j' j 


jiSUU 


a£ CujLuj uuj j ^ul£ öj Aj j ö j 4udil jl j jj jl£ ö jj& 4 u j 4Jb 4uUj 4J 4££ 4 u 4uUaj ^ 4u 

J û' C5^j' J^ ^ û^' J^ Û J J Û 4u JJ ^l j^ J jj ^ Û ^' y ^ 

j öA5 4^ 4Jj ö^ 4uLû j ^ 4u (j jA 4u 0 j 4 ujjj jl jj jLa 4£ 4 ujLuj lujj ^^ujI j-p jjj£I j 0Jj 4 uuj 
4u Cuj 4£j Cujujjj^ CujLuj uujj 4uLg j ^4u<jjA4uUj4u4u ^l jjU Jj öj 4 U£l j ^jj 4uuj 
4u jl£ 4uj 4£ujl£ (j ö j 4u jj Cujjj£JjI£ 4u jjLu j& ^La j cJ 4£ 4J 4uU j ^ 4u Cujj ö^ j£l 

Cujj 4£j j öû 

4u 4uU j ^ 4u jjjl Jj ÖJ djjj£ öJ £-J ^l J^ (J jl£ jLuj j£ ÖJ cjujj cjujj ^ ^Uj ÖJ 
4u ^U Cujj ^ 4 ^öUj 4u jjjl jJ cJjUû j& ^uLa j j£ öj öj jjJJ^J jl£ 4u Ulj jl jjd -ii 4-^. 

. OJ%?J^ 
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Css language 


Ulû 


ö^jjjuj j lP * k * j 0Jj ^-Luj j^ AA (JjjLj Ajjj^ ^ <S L ji. ^l jjjjolj Aj öj 

CIuj AA JÛ Ji LS^JJ^ ^jLI jjA öj jj öJ AjLûj ^ Aj 


L-£j ÖJ J lSÛ öû (J ö Jjjui ^J AjLöJ ^ Aj ^JjjJJJS jJ 

www.youtube.com/computersoranu 


^UjAjIS Aj 


^ ^ Aj JjUjjA <_g-il*j Ai e jljUş. ^UjA jl£ 4 j <_$ jljiU <_>jjj <_>jjj ^ ^Uj 

AjLojS ja. j 4Luil j j£J Aj ^ je>l ‘i ^jjl^ Aj AjLo j ^ <1 lj <j Lim^jjl^ 4 j l^Ij jli ej 4 j 

■ cr^ ûJ 


tj j Aj AJjuUjJJ I j Aj AjLöJ Aj 4j AjjIj (JJjuJ jjj AjLûJÛ J ^J (J ö J 4j (JjlJJ ^j 

Cy* jaj jj ciuj£j <j j 4 uuj <] j a£ Ajj a5ujI£ duj <lLo dj a£ jj a£j ^g jLp 

ÖJ Aj Cluj öJ tj ÖJ <JUJ JJJJUJ <J a£j A£ <JJjuJ jJ ^Lj öj L_fll j£ ÖJ Aj ^£lj £gj Aj* 

: f <j j^p <-*l 


7 






Css language 


Ulû 




p 

{ 

} 


A^L öû ^jI^ l^ )Lû ^ u ^ I ö^ ^J C 5 "^^"J lS ^ ^S 

^JUJ J±1 AjIjLû^ j Aj jU <jb j£ j Aj ^aj| Jj ö^ Aj <j!j A£ jj^ ^ Aj jL <S öj ÖJ <juJ (J <J j-oJ 

; 4J J>1J (J^JJ (J^JJ ^ j <j Jj 4 jjL a£ 



(J jLp *L 4 j ^JjIj A£ jLujuj jJ û jkL ^J^ jLp jLû 4iLaja j Aj ö jLp 4£ 4i j>L <S LÎ ö j 

: Ij 4 j <jL*£ Aj (^jj^jj aJ jjIjû L_fll öj 4j JU j U aJ jJ*Jjj <^3 ûj ^J^ 


AjjAj jj a£ ûJ 


p 

{ 

Color: 


} 


aûL Aj AjLuÖjj ^ Aj <_£ a£ Aj AjIj j£ aJ jjljj Cjjj AjLa ej a£ jjjoijj oj A 5 U o j j Aj jjIjû 




Ajj^aj 
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p 


{ 

Colonred; 

} 


(jjl jj oû jiwjÇ jjjI&Ij Aj jaJ 'C <jLaj ^ Aj ^Ijj&jI^ Aj (jjljluj Aj jjj Aj AjjLS Aj« Aj 

Û LS^ 


û-L^ 


j'jp Cff^ ^ Ojj'jJ ^ MJj j'L ^ (J^ (J^ yr" 1 LS- 1 ^ j LS-^J^ uV 1 Ji 

; jjjj^j ^jlS Aj J jj a£j ^ tsjlS 

: f <* (5 j'jp 

Aj Aj« jU a£L ^ l£ öj (JjLLj^ ^gjLö j (_gjl-^ a£LS jL aJ jm^j jl£ Aj ajLû j ^ <j jp'jj oj 
eJ jl^ Aj AjjjLi j aJ I j Aj jj a£j Aj j A_ui aJ AjLo j ^ Aj ^^g-jL^ eJ j£ A^ AjLui 

: 


| e jljiui Aj L_fll j£ öj A_j (_g^LS j lj Aj ^juijjj i-*l <*<<»■' jj dijj Auo eJ j-a Aj j-aj jj 


Ajjjj 


<html> 






Css language 


Ub 



<head> 

</head> 

<body> 


<p style="color:red;">û' :i " i -bL£</p> 


</body> 

</html> 

L_fll j£ ÖJ <J ^ JJ x Jj jJ Aj Aj AjjIj a£ ÖJ 

çş^ cr’'-* J cr^ eJ J^ C^'j^ j 3 c - 1 ^ 

ö^j£ jLû a£L jLti ö j ^Luj öj ö j ^Luj (j Aj jaj <1 

1 j AjL&jû ^ a!i a£ ^juj jj jULLLuj ^jLûjû jjI j^ 
CIjj a£j Ajj^. Ajjjuj ^ J ^Luo <S (JjjJJ (JjjJJ 


; ^aL^J Aj 

JULlbJJ^ 


jjjjuj Aj ö jJ (jLû <£ A \u *.\ jj öj jjjjj (J ^£j 

^Ujja 4 j jl£ ALli dûj lj Aj ^yjj^j jl£ 

.htm 

û^ 

.html 


4£ ^LgL^j A!i jj ^Luj j a£ Aj 
Aj öjI jJjuj ^ AÎi jJ J 4£ Aj öj 


_ JJJJA jl£ <J (JjLöJ jA J L <S jl£ j£ <-ûJJ a£j jj^ jj a£j l_Sj ^juj 
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<html> 

<head> 

</head> 

<body> 

<div style="color:yellow;">û^^ jj^</div> 

</body> 

</html> 


aLa-j 



Aj <jLaû ^ ^Jjji jj öj _ (jj A^j <jLa j 4j 4 j jl£ jjjjljJ ûj jj ^£j jljjjuj Aj Ia û j j AA û j 

| <jj-aj (JjLaj jA ^^jLa j û j <jui ^juj Aj jlj <J j jjg ji^ 


<html> 

<head> 


<jLa j ^ Aj ^gjljjA jl£ <J <J <J <jjLj jjjui jj oj <£Li j <J ûjJ 

</head> 

<body> 

</body> 

</html> 
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(JjdJj ^uuJ ^jLöJ ^jI£ Ajj A 5 LjjI£ ^jjjI jJ öJ ÖJ 4 -JJjA 4j a£ jJjuj J "4 j Aj Cjjj öû jjI J^ 

ÖJ AJJ A-ij ^uudL CllJJ öû ÖJ JJ A£j AjI^. J ^Ljuj a ! (JuJJ 


Aj j^J 


<html> 

<head> 

<style type="text/css ;, > 

</style> 

</head> 

<body> 

</body> 

</html> 


Aj Aj Aj AajIj a£ ‘ (jLalj oj e j e.i j£ (jLa 4£Li j Aj dûj a£ eJ ^jLp Aj A^ Aj jaj Ai Ll e j 

AjLaj ^ Aj ^jjljjA jl£ 


<j JA j 


JJjui <J JJ A£jJ (J A£ AjjjuJ jj ÖJ L_fll j£ ÖJ 4j ^£Lj Cjjj 4 jLû öJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Coloriblue; 
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} 

</style> 

</head> 

<body> 

<P> OÖ^ ^ (j^JJ* <A</p> 

</body> 

</html> 


; Aj 




J 3 C5^ ^ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Coloriblue; 

} 

div 

{ 

colorired; 

} 
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</style> 

</head> 

<body> 

<P>Ojj^ ^ ** </p> 

<div>ûu& (jb® jj* </div> 

</body> 

</html> 


; ^»L^J Aj 


jjjja Jg jUjjMj 


: ^ AjIuj ^ jtjiui 


Ö J <JU0 ^^uJi <J a ! Jj| j^ JJ A£j <juj jk <J J <joj ^jUi (J ö jJjuo <J AjLöJ <J JJjl jJ öû 

^ cs^ SU (J^ L>^ cs" 1 ^ ^ 03 ^4? J ^ cs^W J* cs^“ j cs^ 

jj a£j ^ JjUj j& a£Ij j ^uuj 

^ jklj j a£ ö jS^Jilj CIuj ö j jj a£ û j l_Sj <juo AjLûj Aj jj a£ 4-Lli j Aj CIuj öj 

; 4 j AjLöjjû 

xss 

4Jb (JjoJJ ^jjUJ (^juj ^jI£ öûjS 4 j Aj AjjIj (j <Lli j L j <JjL<u jA ^Lli CIuj öJ öj CIuj 

. J 6 Jja ^ Aj jlj jbS JJÛ J 


<J JAJ 
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j Ajuj a! AjIj ds öj Aj j^ j <juoLuo j 4uuo a! a£j ClbuOjJ^ C*ljJ j3 12 ÖJ Auuo 

L-J Jj^uoLp 

AjLû öû JJjuOjJ öû AjJjuOjJ j <J L_fll J^ ÖJ Aj Jj& Aj AjIj JJjuOjJJ C^JJJjuOjJ CllJj AjLû öû jjlj^ 

jjLp lJI j^ ö j Aj ^12 jiUJ jiUJ ^ ^li jUaJ^^Aj^jja£jja£a1jöj c^jj 

I ö jl jiui ^ Aj jj ö^ 



Aj <Lli öj ^J^ jLöJjuOJJ^ J ÖJ öA! j9 j Aj jIj <1 JJ ö^ L_Sj Auuo Aijli ^ 4 j jjIj^ 

cs^Ji* 


Css 


JJ öû L_Sj 4uuO 

; <i j^i 



Ö jL^> ^ Aj JJjii ^JjJp ^uuo ^LöJ <J jJ ds AjjIj A£ ^j£ L_Sj 4uuo jLû 4-Lli j Aj J ö J Aj J I J^ 
Auuo <S jjjij jjoij (^ 5 ^ ^Jjli ^jI^ <Jj A^jjI^ ö j Aj jj JJJJA ö^ jl^ <j l* 1 j£Ij JjLj jA j\j a 1 

: O' ^ oî ^ j 


<html> 

<head> 


15 







<link rel ="stylesheet" type="text/css" href="style.css" /> 

</head> 

<body> 

<P>Jjj£ ^ 4^</p> 

</body> 

</html> 


jjjj ^Lli ^gjLudJ^l j jjj di <jAj (^joijj jLaj£ ej ^gjui Aj jlj e^ j£ j Aj 

. d/Lij* ^Lli jU jj (jjjj 


■ û'^ j ûa! ja ul <j jlj <î <Lli jj^ j aa j a£jjj <jjj 


© indec 

6/3/2012 12:03 bjl^ 

Chrome HTML Do... 

1 KB 

j style 

6/3/2012 12:03 bjI^ 

Cascading Style S... 

1 KB 


e jjj jLa AS AiljS ej Aj (^£j oj jjjjj oJ (jL®- 3 Aj Aj AjjLj AS e j ej a£j ALli j Aj t *< . .< 

. öjjûjS û^J^ cs^ 1 LS^ jU Aj a£ ^ A^i e j j Aj 


; Aj 


'd 4 jjjjJ j'jL^ OJjL^û ej AjU j Aj ^Lj^jjjI^ Jl Ajjj^ <î jjj ^jLjJ jj A^ Aj 

. f L9 j'j^ 
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l-5o öj j l-5o jjl jJjuo Aj 


www.voutube.com/computersoranu 




ÖJ <j]Lû jIj <S I** uX j AjIj JJj^J J^ Aj (JJ AjjLj JJ AjIjLûJÛ j Aj ^uuoL L <joî Aj <S 

jLû 


color 


JJJj^JJ jLû ji. J JJJ ÖjL Aj jLö Aijjuo jJ ÖJ jLl jJ ÖJ AjLûJÛ ja Aj J jA Aj 


' <J jaJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

colongray; 

} 

</style> 
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</head> 

<body> 

<P> jl^jj£</p> 

</body> 

</html> 


; a . j 




Font-family 

jUl£ Öjl Jjjoa AjIj jLojI£ Jj (jjj^ (^JJjj^ jj CjJ^jl£ Aj <jLûj3 ^ Aj 


<j JAJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

font-family:impact; 

} 

</style> 

</head> 

<body> 

<p> jl^ûjj£</p> 

</body> 

</html> 
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<J 



Font-size 

j ö JJ jLö j^. (.5jj_) (jLö AjJjuJ jJ ö jL ^ Û^' AjLûJÛ Aj (J jA 4j 

: o 3 ^ ls^jj^ 

<html> 

<head> 

<style type="text/css"> 

P 

{ 

font-size:33px; 

} 

</style> 

</head> 

<body> 

<p> jU^jjj£</p> 

</body> 

</html> 


! ^L^J 






Css language 


Uta 


jS 

j%J jl£ Aj AjU Aj jjjljj 

ûJ:i j#^U C CS-^W <1 U ûj j AA ûj 


Large 


Small 


x-large 


x-small 




<html> 

<head> 

<style type="text/css"> 


P 

{ 

font-size:x-small; 

} 


</style> 

</head> 

<body> 

<p> jli*jûjjS </p> 

</body> 

</html> 






Css language 


Ub 






Text-align 


jJ CljJj ^JJ J A£ Aj <J JAJ Jj JJjuJ jJ AIujIjU ^ J^ jLp Jj CljJ^jl£ Aj AjLûJÛ ^ Aj 
jjjjA jl£ <J <jLûj3 j Aj I j Aj CIlujI J öjL jIj L_J 4u£> jLj j L$y ji ^ ^ 


Aj JAJ 


CIlujI j b jL Jj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-align:center; 

} 

</style> 

</head> 

<body> 

<p> jU^ûjj£</ p> 

</body> 

</html> 
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; Aj 



; CLlojI j (jV J j jaj 


<html> 

<head> 

<style type="text/css"> 


P 

{ 

text-align:right; 

} 


</style> 

</head> 

<body> 

<p> jli^jjj£</p> 

</body> 

</html> 

! c-J (jV Jj <j j-oj 


<html> 

<head> 

<style type="text/css"> 


P 

{ 







text-align:left; 

} 

</style> 

</head> 

<body> 

<p> jLL^jj£</ P> 

</body> 

</html> 


Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 


Text-transform 


I j jjjl jj eJ ej <jLajfl ^ Aj (j jA Aj jl^ e^jjjuo <j e j AA AjLajS <î î< Aj AjLajfl ^ Aj 
^j dim e^ e jj a£ AjI j (jLiiJ a£ Aj Aj j AA ^Lj ö j ^juj ^jj ^jLojI^ ^jjjuj jj 
AA jU (jj a£j j öjj û jJjuo Aj jl£ Ajjj jj^ AA jj a£j 1j jjjI jj öJ jIj C1jI£j 

ûj ^ J 0,:i lS a Jf^ *■} l^jj* 


capitalize 


dil^j dLui eJ e jj a£ ^^jjj Aj iiî Aj AJjj j AA (jLi e j Ajui a£ <JjI£ eJ I j AjLajfl ^ Aj 


| <J JA J 


<html> 

<head> 
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Css language 



<style type="text/css"> 


P 

{ 

text-transform:capitalize; 

} 


</style> 

</head> 

<body> 

<p> we are strong </p> 
</body> 
</html> 


We Are Strong 


uppercase 

Ajjj jj* AA ( JJ a£j jLajl£ AjJjuj jJ <S 1 j jjjI jJ 

jA Aj Ia ö j j AA öj 
CIjIAj jLujJJ ÖJJ ö jJjuo <j jl£ 


; j^j 


<html> 

<head> 

<style type="text/css"> 


P 

{ 

text-transform:uppercase; 

} 
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</style> 

</head> 

<body> 

<p> we are strong </p> 
</body> 
</html> 

WE ARE STRONG 


loweracase 


o 


<j ja j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-transform:lowercase; 

} 

</style> 
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</head> 

<body> 

<p> WE ARE STRONG </p> 

</body> 

</html> 

we at'Ê strong 


Text-decoration 


llj^)J lû AjJjuo J j öjU <J (JjA JJ A£j I j (Jjj| jJ AjIj JjA 4j <J AjjIj AjLûJÛ Aj 


none 

4A ^)jjj ^ <_£-La ^ J <J (jLa û^) 4_JLa jj Llj (jLa£jJ _j AS Aj AS dilS öJ I j AjLa^)3 ^ Aj 

i Ly J A£ aJjA (jjjl jJ oû AjLa^)3 ^ Aj <_£ Aj 


Ajj<aj 


<html> 

<head> 

<style type="text/css"> 

a 

{ 
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text-decoration:none; 

} 

</style> 

</head> 

<body> 

<a href="http://www.sul.eu5.org/"> sul.eu5.org </a> 

</body> 

</html> 


<J 


sul.en5.org 


underline 


^jLjIjA (JJ A£j (jLojl^ AjJjuo jJ AJIj AjLûJÛ ^ Aj jA 4j (Jjjl 


; <j j^j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-decoration:underline; 

} 

</style> 

</head> 

<body> 
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Css language 


Ub 


<p>jU^jjj£</p> 

</body> 

</html> 





overline 


<j ja j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-decoration:overline; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 
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Css language 





Line-through 


Jjjj£j L jLojl^ AjJjuJ jj ^JjujI J öjIj Aj (JjA Jjjl Jj öû AjLûJÛ ^ Aj jA Aj 


; <j ja j 


<html> 

<head> 

<style type="text/css"> 


{ 

text-decoration:line-through; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 


4j 
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Css language 


Uli 


Text-indent 


I j (jjjl jj eJ ej <iLaj3 ^ 4j j jA Aj jl£ ^ j ^ij Ajuj <jLaj3 A^j£ Aj AjLajfl ^ Aj 
jjlj^j Jj ^jLui jj jjjil jj eJ (_gjjj£jj Clbaj eJ ^Li ej <jui <1 a£ (jj a£j jjLa a£ Ajj*j ji 

| Ai j<ai a£ Ajjuj ji ^ljiLUj Aj C1iI£j dLuj ej Clil£ j Ai jj e jj ^ (_j£ AjI j j A-a AjI j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-indent:23%; 

} 

</style> 

</head> 

<body> 

<p>cjUuijjj£</p> 

</body> 

</html> 



e jlj£ a£ Aibuj ji Aj <Hluj ej djl£ j Aj e jJjuijA Aj AjI jj A-a jjiiJ oj 
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Css language 



Font-style 

AJti jU£jjI jiJi Aj jl£ <1 luj jj j jl jJjuj <j Aj AjjIj jl£ AjLgjû a! a£j£ Aj jjj Aj 

<J 

♦♦ 

italic 

ÖJ AjI£ jV jLojI£ AjJjuo jJ Aj 

I <J JAJ 


<html> 

<head> 

<style type="text/css"> 


{ 

font-style:italic; 


} 


</style> 

</head> 

<body> 

<p>jli^jj£</p> 

</body> 

</html> 


aLa-j <J 



oblique 









<html> 

<head> 

<style type="text/css"> 

P 

{ 

font-style:oblique; 

} 

</style> 

</head> 

<body> 

<p>hy</p> 

</body> 

</html> 


Word-spacing 


Aj* dû j aIj j a£ Aj Jj aj(j jl£ Ajjjj j! jij aJ ^Li jj ^ljlj Jj clyûjl£ Aj AjUja ^ aj 
dnj 6Û AjLûjS ^ Aj HjIuJjJJ Ij Aj clu <£j (_ 5 jLû dl ji, (_£ jjj ûjlj Aj jl£ Ajj j jljjj (_$!û J 




<html> 

<head> 

<style type="text/css"> 

P 
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{ 

word-spacing:30px; 

} 

</style> 

</head> 

<body> 

<p> J jj£ jtLuiJ jj£ </p> 

</body> 

</html> 



Letter-spacing 


öjU Aj (jJ^I jJ öû AjI j Alnj (jl jjj <S ^jLuj jj jLj Lj ^Ub jj cln^jl£ Aj AjLûjû ^ Aj 

; öj <jj a£j jjjJ jUjJ^ Aj <î (jl* j^. (Jjjj 


Aj JAJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

letter-spacing:30px; 
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Css language 




} 


</style> 

</head> 

<body> 

<P>,jlluoj JjS J jj£ jliuoJ jj£ </p> 

</body> 

</html> 

; ^aL^J Aj 


Jjj^ Q l J J J j <■ 


background 

<jjj (jjjl jj e J lA ej j AA ej Ijl j 5 L£Ij j e ji*j <j i_ 5 Lj ej (_gjljl j jJ djjjjl£ <j <jLajS ^ Aj 
a£ (jj a£j jJ jIj (JJjI jJ öû öj CIjjj 4iLiJ a£ j AA jJ AjjIj£ c£Ij Aj jj a£j jjj 

! jj <jjl£ cjl^ ö j ^ Ö J ö jWjj^ 


Background-color 

L_fll j£ öj jtj jj a£j j jLj^ jLq a£ öj ^lJLû jAijl j££ Lj j-jj! j^ ajLûjû ^ Aj j j& Aj 

| <J JA J 
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Css language 


Ub 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

background-coloriblue; 

} 

</style> 

</head> 

<body> 

<p> J jj £ jtLuiJ jj£ </p> 

</body> 

</html> 





<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-coloripink; 

} 
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Css language 


Ub 


</style> 

</head> 

<body> 

<P>(jllalJ jj£ J jj£ jlialJ jj£ </p> 

</body> 

</html> 


al^J <J 



Background-iamge 


djjj <JJ dj 1^1 Juj J (jAjjl j££L <J JJ A£j <JJj (JJjl ÖÛ AjLûJÛ ja Aj JjA Aj 


I <J JAJ 


<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(cr^' J ^ ls ^ û j^); 


36 








} 

</style> 

</head> 

<body> 

<P>,jlluoû JjS J jj£ jlluoJ jj£ </p> 

</body> 

</html> 




<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

} 


</style> 

</head> 

<body> 

<P> jlluoû JjS J jj£ jlluoJ jj£ </p> 

</body> 

</html> 
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Css language 


Ub 



jllaUjjS J Jj£ 

HTML language 

j.£ j ^ 

s • >y; *j 

UUjVlMl.y^wUU 


HTML language 

-> J jj* — ■*>“ j <, 

UU 


HTML language 

j J jj^ j'jjiA j v 

UU j O' aJ • y jS mU U 




HTML language 

J J J.£ sr*jJJ“ j 

J* >0*4 

uu j nV aJ *y >s *ju u 


HTML language 

J J JJ^ sr'^ j U 

uu j nV < *y jS *ju u 


HTML language 

uu j^V'0*y>s»juu 


Background-repeat 

Aj ûjIjjjJ cjU Ajjjjj ojljjjj A^ jj A^j Aj Ajjj j aJ I j jjjjl oj AjLa^S j A_i jA Aj 

ö j AlL 


J^udtj ö jiuj ^ Ö J ^ c5 b jWjj^ yj j a£ Aj 


; <j jaj 


<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:repeat-x; 

} 

</style> 

</head> 
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Css language 


Ub 


<body> 

<p> J jj £ jtLuiJ jj£ </p> 

</body> 
</html> 
! ^ 


o Jj$ Jjji jtbUjjS 

HTML language 

j »/ 0 ^ 

uu ^nV <.y>.juu 


HTML language 

-» J J *■? 

»>o*j 

uu 


HTML language 

s> J J_£ <i 

•/-o* 

uu jnV u 


öj Ajj 4^j ^ ö^)IjjjL ^^jjJjuj L? öjJjuj ^ CIjjj AjL^j j Aj öj 


Aj 


<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:repeat-x; 

} 

</style> 
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Css language 


Ub 


</head> 

<body> 

<p>,jliuoû jj£ j jj£ jliuoj jj£ </p> 

</body> 

</html> 

; ^»L^J Aj 



ö j Ajjj <j ö jLjj^ Cl Uj <jLoj j Aj ö j 


Aj JAJ 


<html> 

<head> 

<style type="text/css"> 


body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 

} 


</style> 

</head> 

<body> 
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Css language 


Ub 


<P>,jlluoû JjS J jj£ jlluoJ JJ$ </p> 

</body> 

</html> 



^—LkJAj : j * - -O 

HTML language 

u» J J^ ^t-O -V 

UV> j %V mU 'u 




öj û jIjjjJ jjuuLi ^ AA ^gj j j*i > » (j ö j j >'» <j ^ AA d jjj AjLûj j Aj o j 


<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:repeat-x,y; 

} 

</style> 

</head> 

<body> 

<P> jlluoû JjS J jj£ jlluoJ jj£ </p> 

</body> 






Css language 


Ub 


</html> 
! ^L^J ^ 


J 

HTML language 


1— ITIVIL language 


HTM 






1— ITIVIL language 


HTM L_ language 


1— ITIVl 






1 1 

U 

1 1 

U 

1 


Background-position 


J*i}jl j£ dlL Aj 4jLöjjLj£ 4^ Aj Ajjj j 4j ^JjuJ Aj JJ A£j (jLö 4^ 4-JJj 4-i Ij Jjjl jJ 
CLlojIj öjIj jIj Cljjajlj jV 4-1 jIj L-J 4_^ jV 4j jj a£j jJ jIj jdjl jLa 4^ öj 4^1Lû 

^ cMy 


; 4j j^j 


<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 

background-position:center; 

} 

</style> 

</head> 

<body> 

<P>,jlluoû jj£ J jj£ jlluoJ jj£ </p> 

</body> 


42 






Css language 


Ub 


</html> 
! ^ 



: V jj 

<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 

background-position:left; 

} 

</style> 

</head> 

<body> 

<P>,jlluoû JjS J jj£ jlluoJ jj£ </p> 

</body> 

</html> 







(jV Jj 

<html> 

<head> 

<style type="text/css"> 

body 

{ 

background-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/s320x320/578155_116644348476527_1909924797_n.jpg); 

background-repeat:no-repeat; 

background-position:right; 

} 

</style> 

</head> 

<body> 

<p> J jj £ jtLuiJ jj£ </p> 

</body> 

</html> 




Ub 
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Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 


class 


Jj joÛj ^ j jU Al Cjj a£j cJ jUû UJjÊj jja. jjjjj 6J Aj cJ JJ3 Luuj 
; (^gjuojj jU oJ Aj öjJjoi j Aj I j Aj jj a£j jIjJ l_s( j£ oj Aj ^^£13 jLaljluiJj j a£ Aj 


P 

{ 

? ? J_ 

L> * ^ *Lj ^Stj J ^ jJ 4j|j 4jlS AiljS ÖJ 4j JJjû AA Jj ö j Aj ^aV 

^uud <S AS CllJjS Aj J <juj <S (J AiLjJ <£jjlS j Aj jLû I j Aj cJjLöJ jA j\j <S 

Aj (Jjl Jj öû CjjILûIj jLq <jouS j Aj JjJ^IS J jA 4 j ^aV ^J ÖJJ^jS jLû J jLj^ JjJJ Jjjj 

Jj j'jW CS 1 ^ ih ^ ^ J 4A 6 J Oî ^ jUû c>J c>J ^ jU a] L_il j£ ûj Aj jja. 


. û#^ 
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Css language 


? <4 ûit 

ÖJ Alllijjl JJJ Aj CljJj Aj öJ A£ CllLuJ jJ öû a£Ij j Aj Ij Ö J <JUJ 


a£ Aj ^l öj 4j jj jj a£j ^jLp L_fllj£ ÖJ <J JJ^- JJ^ Cljjj AjLû öJ A-öJJ jjI j^ 



JJ^! Aj jj a£ oû J-j 6J j£ (J jljû jU a£ Aj ^l j^ 6J Aj liîiiu. JA Aj jjjjj 6J 



j^û Aj jj U oj (J U Ajjjoljj ^^50 6 J J j)J <£ 6Û (J jLjJ f, 6JJÛ ^l j£ 6 J Aj 6 jU f Aj 6J 

p.first 

{ 

Colonred; 

} 

p.second 

{ 

Coloriblue; 

} 


Ajja3 jj jjjjA oJ jljjl^ Aj JjLajjA jlj AÎ !*'■ j‘' 6j Aj AA jLaSlj^ oj Aj jjş. JJ"3 '*'■ Li ;‘' 
Ail jS 6 j Aj j Aj lj Aj ^ 6ÛJ ^J j jjjjuo ( 4j| ja. (_jjS^ (J AÛojj <— JJj A-a oJ j-a 

jjj*j o j Aj Aj AjjLj A£ ^ A£ 0Û (JjLjJ 
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Css language 


<p class = "first"> dj^ </p> 


JJ?'^ Csi ?. JJJ^ C5^ °J o4> ^ j lj uîjL f J^ 6 J J ^ Û^? 6 ^ 

^ ö (jLû Aj A£j (JJjuj Ö J *^lj ^ öjjL L^JJ^ ^J J Ö J 

(JJjuj öj Aj Aj AjjIj (j öjj^ j Aj <>0 öL a£ Ailj^ öj ^Lj 


<p class="second"> dj^ </p> 


<i j^J 


<html> 

<head> 

<style type="text/css"> 

p.first 

{ 

color:red; 

} 

p.second 

<html> 

<head> 

{ 

color:blue; 

} 

</style> 

</head> 

<body> 

<p class="first"><j'>?* dj^ </p> 
<p class="second"><j'j^ Jj^ </p> 

</body> 

</html> 
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jjÛI j.lk ^ Ijlj 
\ 0\ 


id 


Aj <A ^jljU^ ^jUlA jl£ <J <jjl jioi <J AjIj j£ öj J^J^ jl^ Jjo <jUij3 <J 

<S UU J jJ jUujoî ulll j£ UIjjI£ jlA jl^ Aj ö J Aj jJ AjLûJÛ ^ Aj Jjj2A£ J a ! 

OJ ls^W Û^'j^ öJ jjj AA ^gjj jUJijjjj (Jjjl£ j-UAJ jjIjU Ij A: (jjJ (_>jJ jU 

. J jU JA ^l£ A^lj Ai i 4£ j'-' ^ l 9 <4 û^ 


(jjjjA eJ j 4 j ejl jjJ 4 j <iLaj3 ^ Aj 


#dana 

{ 

Color:pink; 

Font-family:impact; 

} 
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Css language 



^jU jjI j^ (jj a£j jU^ a£* 4jAjU jjj! jJ öJ (JjjIa (J Aj\ juojj Aj öjU^ <j jaj <1 UÎ öj 
öj *Ljj *Lg <j (j Ajjjuj jj öj öjj^j^ jLûJjLj^ 4 jAjU j Aj \*Ujj n jjjj öûb jJ 

ÖJJ^J^ (J jLj^ (jLûJUJ Ajjjû (J jj^ 

^^jjjuj jj j <juj a! öjUL (jLc (Ub ^jAjU^ Jj a£ (j ^lUj a5UjI£ j lIjjj AjUij j a£ Aj 

jV J^ (^'\>^ Jj Aj <J AjjU A£ (J A£U j Aj jU <S AJjoiJjJJ I j Aj (JJ a£j <J jV j^. 

<J-£ CS^ 1 J^ ^ 6 JJ Û J^ ti jL 2 ^ OJ J ^ CS^W ^JJ^ 

] öjl jJjuJ ^ Aj 


<marquee id="dana"> jli^jjS </marquee> 


\ L_fll^)£ b^) <J <JUJ a 1 Aj 


<html> 

<head> 

<style type="text/css"> 

#dana 

{ 

color:pink; 

font-family:impact; 

} 

</style> 

</head> 

<body> 

<p id="dana">j^jj^</p> 

</body> 

</html> 


! ^LaL Aj 






Css language 


crW cP'j^ ^J oJ ^ ^ ^J^ L$JJ j 6 J^ cr^'j 15 oJ °J 


<html> 

<head> 

<style type="text/css"> 

#dana 

{ 

color:pink; 

font-family:impact; 

} 

#twana 

{ 

color:yellwo; 

font-size:33px; 

} 

</style> 

</head> 

<body> 

<p id="dana">û^^jj^</p> 
<p id="twana">û^ J jj^</p> 

</body> 

</html> 









ûLljlU^jC^ 


L-£j ö J J öû ö jJjuJ Aj 

www.youtube.com/computersoranu 

blue.dana66@yahoo.com 


! J ^ j jj 


Ub 









border 

jjjljj û j jj dboijjj jl£ Alvi (j Ajjj j jj jljii jjjlji eJi (jjij (jjij ^gjLj j aJ 

<j AA jl-ûjl jj! (J jj^- Ia û^j Aa. ej jj a£j (JjIjJ j!_j ejlj A3 jjjl jJ e^ ej jj a£j jl_i$j ej 

jj A^j jLiiuijjJ jjjljj eJ A^ 

Border-style 

Aj AA jLa jjş. jjj a£ jj a£j (JjIjJ jl£ ejljj! (jjjş. jjjl jJ e^ ej AjLajfl ^ Aj (j jA Aj 

dotted 

| Ajj<aj jljj! (^jl^ ejj^. A^J jj^. Aj 

Border-style:dotted; 




<html> 

<head> 

<style type="text/css ;, > 

P 

{ 

border-style:dotted; 

} 

</style> 

</head> 

<body> 

<p>jLL-jjjS</p> 

</body> 

</html> 








Css language 


double 


| j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:double; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 


aLa-j 
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solid 

e jj JL 


; <j ja j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:solid; 

} 

</style> 

</head> 

<body> 

<p>jll^jjj£</p> 

</body> 

</html> 




groove 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:groove; 
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Css language 


Ub 


} 

</style> 

</head> 

<body> 

<p>j^jj£</p> 

</body> 

</html> 


dashed 

JJ <_5^U <_£ ^ 


; <j ja j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:dashed; 

} 

</style> 

</head> 

<body> 

<p>jU^jj£</p> 

</body> 

</html> 


aLa-j Aj 
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Css language 


inset 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:inset; 

} 

</style> 

</head> 

<body> 

<P> jtlu)Jjj£</p> 

</body> 

</html> 


Aj 



outset 

: j ^ ^ 

; <i j^j 


<html> 

<head> 

<style type="text/css"> 

P 
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{ 

border-style:outset; 

} 

</style> 

</head> 

<body> 

<p>jU^jj£</p> 

</body> 

</html> 






ridge 


j'j^ lS JJ^ ÛL>“' 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:ridge; 

} 

</style> 
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</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 





hidden 

0 I£ .jljji 6 j <jJjUj 4 j t 1 jl . i' ûjî AA <jLaj3 ^ <j 


; <jj<aj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-style:hidden; 

} 

</style> 

</head> 

<body> 

<p>jll^jj£</p> 

</body> 

</html> 
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; Aj 




Border-color 

(JJ A£j <JjLp jLû J p* (J JJJ ÖjL <J jl£ öjl Jjî ^Lj ÖJ Jjjl Jj Öj AjLûJÛ <J (J jA Aj 


; Aj 


Border-color:blue; 


Aj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-color:green; 

border-style:dotted; 

} 

</style> 

</head> 

<body> 

<P>(jtlu)Jjj£</p> 

</body> 

</html> 


! ^LaL Aj 








Border-width 

ojU Aj o j <£j j Laj\£ o jl jjî (jjjiuo Aj jjjl jj oû oj AjLojS ^ <j (_$ J& 4j 

: (j^ cP'j' û^'j^ 0:1 ch jLo jî> (jjj j 




Border-width:20px; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-color:green; 

border-style:dotted; 

border-width:22px; 

} 

</style> 

</head> 

<body> 

<p>jLLj^jj£</p> 

</body> 

</html> 








Css language 


Ub 



Border direction 

j\j oj 0 J ^ui jL J J^ jU V ^ j^ ojj'jJ 6û jj ûJ tli«j jû j'jii Aajj 

i Oî ^ 6 JJ a£ (j Û jU Ai J j#j'«j Jj (^U 6 J jbjik. (Jjjj 0 jU 4j 'j o j'jik 


Border-left 


û jl jij Aj l^j <j <j c_J (jV (j j' jj! (jjl£juo oJ jj <JjjJjI£ Aj AjLajfl Aj 


Border-left-color:red; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

border-left-color:red; 

border-left-style:inset; 

border-left-width:15px; 

} 

</style> 

</head> 

<body> 

<p> jU*j^jj^</p> 

</body> 







</html> 
! ^ 



Border-right 


jU Ji. ^ jj ö jU Aj CIlujI j jl jj! ^Jij^ (j jljJi Jj CljjJijl£ Aj ji Aj 


<j jaj 


Border-right-color:blue; 


; <J jaJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-right-color:red; 

Border-right-style:inset; 

Border-right-width:15px; 

} 

</style> 

</head> 

<body> 

<p>û^jj^</p> 

</body> 

</html> 
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; Aj 


Border-top 

iSjJj ö jLj ^ Ö J Ö J 4-J^J L SJ^ J^ Cllu3 jIj jI£juJ öL jJ C!jjLjI£ Aj Aj 

; jL»ji. 


; Aj 


Border-top-width:20px; 


Aj ^aJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-top-color:red; 

Border-top-style:inset; 

Border-top-width:15px; 

} 

</style> 

</head> 

<body> 

<p>jli^jjj£</p> 

</body> 

</html> 


; Aj 








Border-bottom 


jj t-i“, jjl oj ojl ji. jj _jl jjl jU jp. ojIj 4j (jjjl jJ oû oj 4jLaj3 ^ Aj (j jA 4 j 


û jljiji ^ Aj 


Border-bottom-styleidotted; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-bottom-color:red; 

Border-bottom-style:inset; 

Border-bottom-width:15px; 

} 

</style> 

</head> 

<body> 

<p>jU*jûjj£</p> 

</body> 

</html> 


! ^ 









'V _j 4A •“'-j 

<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border-bottom-color:red; 

Border-bottom-style:inset; 

Border-bottom-width:15px; 

Border-top-color:blue; 

Border-top-style:groove; 

Border-top-width:15px; 

Border-left-color:gray; 

Border-left-style:outset; 

Border-left-color:yellow; 

Border-left-width:15px; 

Border-right-color:pink; 

Border-right-style:dashed; 

Border-right-width:15px; 

} 

</style> 

</head> 

<body> 

<p>û^jj^</p> 

</body> 

</html> 








Css language 


UIj 




Border in line 

ûJ ^jj a£ ejlj <9 \j ûj Ajui (JiA c£l Aj Aj jj A^j diuijj^ jl jjl <jjjl jJ o^ lA e j j AJt> oj 

<_£ a£ a5o ej i$ A£ ej jş. jjI jJ jj a£ 


e jlji^ ^ Aj 


Border:3px green; 




<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 

} 

</style> 

</head> 

<body> 

<p>jU*jjjj£</p> 

</body> 

</html> 


aLa-j Aj 
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Css language 


padding 

AjIjjoj j <J jja AA j <JJj J L_fllj£ ÖJ Aj jl jJJ <jLj JJ^I Jj Öj AjLûJÛ ^a Aj jA <J 

A-ö ^j| jj ^juj jj im jj <j j^j jj AjI j jj a£j j jIj^ jj^jl^ Aj JjLûj jA aJ J 

^ ji. lSJJJ ö J^ ^ ^ A^j jjLl öjIjjA ^ajl£ Aj a£ j a£Lj j Aj (J a£ a ! Ajjjuj jj j Aj l?Lj 

I <J JAJ Jj 

Öj AjLûJÛ j Aj (J jA <J jLuûIj CIuj AJt> (J jl Jj] <J-Luj J j j Aj ö j ^auuJ jJJ jJ ClUj öL J-û 

^a A£j <JjLp ^a jk L?JJJ Ö J^ ^ L? 4£ öjl jj] j A£ <iijuJ jJ jl jJJ <jLj A^ ^l\jl 

; <i j^j 


{ 

Border:2px solid green; 
Padding:20px; 

} 
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Css language 


Ub 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border:2px solid green; 
padding:20px; 

} 

</style> 

</head> 

<body> 

j Ij <jaLLa </p> 

</body> 

</html> 


aLa-j <J 



û j <jj <£j ^ 'Cjbj Ajû j Aj 4j <j _jj«j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

border:2px solid green; 

padding:2px; 

} 

</style> 
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Css language 


Ub 


</head> 

<body> 

<P>jjj ^lj ûJj b </p> 


</body> 

</html> 






jjj ? lj -O.J JJ b JJi 




Padding-left 


Aj jj <£j (_^jtjû t_J 4_^ (jV (_$Uj jjjl jJ 


; <j jjcli 


p 

{ 

Border:2px solid gray; 
Padding-left:20px; 

} 


Padding-right 


jj <£j (jjljJ dLuilj (_^V (_^bj <jû jjjl jJ eJ ö jJ*J jCa 4A Aj Ia ö j j 4A öj 




p 

{ 

Border:2px solid gray; 
Padding-right:20px; 

} 
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Padding-top 

\ jj <£j (jjLp oj 6J Ajuo (jV j <-0 (jjjl jj oû Ia oj j AA oj 




p 

{ 

Border:2px solid gray; 
Padding-top:20px; 

} 


Padding-bottom 


jy A^j jLöjp. (j jj j öjIj 4 j 6 j 6 JJJ (_£lûj (jjjt jj oû lA oj j AA oj 


I <J ^AJ 


p 

{ 

Border:2px solid gray; 
Padding-bottom:20px; 

} 




<html> 

<head> 

<style type="text/css"> 

p.a 

{ 

border:2px solid gray; 
padding-left:20px; 

} 
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Css language 


Ub 


p.b 

{ 

border:2px solid green; 
padding-right:20px; 

} 

p.c 

{ 

border:2px solid blue; 
padding-top:20px; 

} 

p.d 

{ 

border:2px solid yellow; 
padding-bottom:20px; 

} 

</style> 

</head> 

<body> 

<p class="a">û£ f'j ^j W ** </p> 
<p class="b">û£ ç»'j U </p> 

<p class="c">û£ f'j eJ j ^ U </p> 

<p class="d">û£ f'j û:i j U <Af* </p> 

</body> 

</html> 
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Css language 


UIj 



Blue.dana66(q)vahoo.conn 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 


margin 


(jLa a£ AjjLuo 4-Uj <_£jl jj! jjl jjj AJ bj Ajj ^ ui j j J Jj djjJjl£ Aj AjLajfl ^ Aj 

Ls AA j Ajjj j L_fllj£ ûj 4j jj£ oj jjûjl£ Aj (Jjj ^JJ ^ ^LŞj aJ a£ (j AjI£LS j Aj (J a£ 
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jil J eJ ^ 4 '\' ■ a j 3 j 4!i jljii 4-a dijj A_a e^ (j-a 4j ja 3 jj 

A£j (_£jLp ji. ^JJJ e jU Aj ^ A^ AjjLuI C_JJj 


A 3 ja 3 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 

margin:20px; 

} 

</style> 

</head> 

<body> 

<p>jtLjûjj£</p> 


</body> 

</html> 




! ^L^J 

’^-F’ '-V ■ « ■ " V f / •/ w •- " 

‘ . . ._t . . ■ ■ ,w 1 " 






dl A^ j e^ Aj -jj^ j Laj jLp A^ (_£ AjUj A-a j <J öjLiJ <! oj 


Margin-direction 


(JT^ (S j' J^ J ^ <î Jj'-^jA (jj 4jL$£jj (jljJJ (jLöj£> lSjjJ ^-î JjJjljJ 

Ö J Ö J^ J^ 1 cl)^ Ö J Ö J AjoJ jIj L-J jt) CJjujI^) Jjj a£j ^ jLjû jLû AjjLuJ 4-L)j 


e j'jiU f Aj 
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Css language 


Margin-left:20px; 


Margin-left 


a1 CIlujjj^ Lj Aj$ (jJjl jJ 4JLgj3 Aj j jA Aj 

; <j j^j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 
margin-left:20px; 

} 

</style> 

</head> 

<body> 

< p>jll^jjj£</p> 

</body> 

</html> 


»L^J Aj 




Margin-top 


(jj a£j jjLp ö j öj <juj jL j jjjI jj Ia öj j AA ö j 
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<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 
margin-top:20px; 

} 

</style> 

</head> 

<body> 

< p>jU^ûjj£</p> 


</body> 

</html> 


! ^L^J <j 


i ub-cr >/ iviy vv ur bu/ ueiMup/ l»^.nu i n 


t : 

1 






Margin-right 

JJ <JjLp jLû jk iSjJJ ÖjL <J dlujl J (J^l J^ Ö J ^LLûja ^ Aj <j 


<j JAJ 


<html> 

<head> 

<style type="text/css"> 

P 
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Margin-bottom 


■ Ö J Ö J^ j^ ^ Öi Cj lujjj^ I^j *Lg jjjI jj öj AjLûjû ja Aj j jA 4j 


; <j j^j 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

Border:3px dashed green; 
margin-bottom:20px; 

} 

</style> 

</head> 

<body> 

< p>jll^jjj£</p> 
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Css language 


! ^J 



C_5s* 4 ÖJ J L-$J öû ^ ö jiuJ 4j AiLöJ ^ Aj ^JjjJJJS jJ 

www.youtube.com/computersoranu 


^cj^) 4_uo j jJ j <_£ jljlûi (j^ 4 ^j Ciuj jjl jjjjl jfi b J 4-jLo j ^ Aj _$& Aj 

. OJ UJ^ lHO " 1 op'j 15 oJ 6 J lA£'j 

List-style-type 
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4Jb (j Jp* Aj C1j AjjLj (S j' 4>a j£ I j 4 j qj a£ öû ClbudjjA C*u <>uj tiljjl£ 

■ OSW Û^J^ ^j Û^' J^ a£ Aj 

Upper-roman 


AJJJJ jl£ öjU ^jLöjj ^JJ J LÛl Aj J Û jJjuJ 4 j A£ jl ^jl£ öjj^ ^ Aj öjj^. ^ Aj 

djLk öû jL£jj j ciA£ öû Al 

: O'j^ f ^ 


List-style-type:upper-roman; 


; <i j^J 


<html> 

<head> 

<style type="text/css"> 

ol 

{ 

list-style-type:upper-roman; 

} 

</style> 
</head> 
<body> 
<ol> 
<li>ljb</li> 
<|j>U! jj</|j> 

</ol> 

</body> 

</html> 


! ^L^J 4 j 







I. IjLj 

n. 


circle 


j ciiU. oJ UÎjj <jjlj (_£ o ji^ Aj (jU <luu] (jl£ <luui (jjjş. <î ûjj ^^fUjljlU jj 4u» 4 j 

diU oJ -lj 4 j JJJ jU ojlj 


| o jljjjj ^ Aj 


List-style-type:circle; 


\ <jj-aj 


<html> 

<head> 

<style type="text/css"> 

ul 

{ 

list-style-type:circle; 

} 

</style> 

</head> 

<body> 

<ul> 

<|j>UU</li> 

<li>Uljj</|j> 

</ul> 

</body> 

</html> 
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; Aj 


o Ulj 

o ljljj 


List-style-image 


jl£ ÖjU AjI j (JJ A£j dbujjjj jl£ AJjuoj] ^JJj Ö JJJUJ Aj (J Ö J Aj jJ Cljjjjl£ Aj AjLûJÛ ^ Aj 
ÖJ ÖJ <JU0 (J <j| j Aj ^U^ <S Cluj (J a£ <S (J <Gjj j ÖjU j AA 4j C1jI£j Aj Aj jjj 


O' ^ Aj 


List-style-image:url( û j^ ^ c?^); 


Aj jaJ 


<html> 

<head> 

<style type="text/css"> 

ul 

{ 

list-style-image:url(http://a6.sphotos.ak.fbcdn.net/hphotos-ak- 

snc7/578155_116644348476527_1909924797_n.jpg); 

} 

</style> 
</head> 
<body> 
<ul> 
<|j>Ulj</li> 
<li>UI jj</|j> 
</ul> 
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Css language 


Ub 


</body> 

</html> 


; ^»L^J Aj 



List -style-position 


ÖJ <jo3 JJJ jLojI£ AILoij] AjI j JJ A£j (J jLp J L<ul£ AlLaui ^^JJjju) A>UJ Jjj| jJ 

Outside 

AjI j Ö J <J03 ^Ujjl Ajjjj JJ A£j jLû AILuu] <1 I j Jjj| jJ öû ÖJ AjLûJÛ ja Aj JjA Aj 

; öjl jJjo 3 ^ Aj _ Cljjj ÖJ ÖJ 4uo3 (J AjJjJOJ 


List-style-position:outside; 


Inside 






Css language 


öjIj 4jj^> cdiû AjIj öj ^Ljuj ^JjujjI Alnj Aj jLû a£ Ajjujj] aS^ CjI£ I j AjLûjû ^ Aj 

öj <juj ^gjjujjl (J a£ a! ^jjI j aj Aj ö j 

; ö jl jLi f Aj 


List-style-position:outside; 


; ö j a£i 4j <j jaj 

; Aj jaj 


<html> 

<head> 

<style type="text/css"> 

ol 

{ 

list-style-type:upper-roman; 

list-style-position:inside; 

} 

ul 

{ 

list-style-type:circle; 

list-style-position:outside; 

} 

</style> 
</head> 
<body> 
<ol> 
<|j>Ub</li> 
<|j>U! jj</|j> 
</ol> 
<ul> 
<li>Ub</|j> 
<|j>U!jj</|j> 
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Css language 


Ub 


</ul> 

</body> 

</html> 


; Aj 


I. ub 

n. uj 

o Uki 

° Uljj 


Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 




Ub 
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table 


oj J 6 _5 jJ <£j L - ' 1 ‘ J J ^ jluoj^ (_£jj j û jl-J Aj Ajjuo^ jjjj (J jj J ! cs^ cs - 1 ^ 6 ^) <î jjjljj 6> ^ 

: ca d & 6 j j oî lsj^p cjj'j^ ^ 


jj a£ oû o jl£ ^ 


r 


<html> 

<head> 

<style type="text/css"> 
table,th,td 
{ 

border:2px dotted gray; 

} 

</style> 

</head> 

<body> 

<table> 
<th>jû </th> 
<th>û <j</th> 
<tr> 

<td>lj'x/td> 
<td>^ *</td> 
</tr> 
</table> 
</body> 
</html> 


! ^ 






Css language 


Ub 



jrj 1*^4 Aj 

jUh 

j^ ' 


<html> 

<head> 

<style type="text/css"> 
table,th y td 
{ 

border:2px dotted gray; 

width:30px; 

height:33px; 

} 

</style> 

</head> 

<body> 

<table> 
<th>jU</th> 
<th>û <j</th> 
<tr> 

<td>Ulx/td> 
<td>^ *</td> 
</tr> 
</table> 
</body> 
</html> 


! 






Css language 


Ulû 


jUj 

î^î 

\*la\ 

■ ■ 

: u : 

ilibi 

MmmmmM 
■ 

MmmmmM 


<luol jU jjjl jj ûJ jjjjm jj oû 4'u : j-\ jlj <î (j AjLhjuo jj j Aj jjjl jj oû Ia oj j AA ûj 

; jUja. Ljjjj 0 jlj 4J jj a£j jlp jLûl£ 


; <jjAj 


<html> 

<head> 

<style type="text/css"> 
table,th,td 
{ 

border:2px dotted gray; 

width:300px; 

height:33px; 

text-align:center; 

} 

</style> 

</head> 

<body> 

<table> 
<th>jU </th> 
<th>û ^</th> 
<tr> 

<td>Ub</td> 
<td>^ *</td> 
</tr> 
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Css language 


Ub 


</table> 

</body> 

</html> 




jU 



Ulo 


T T 


jU AlLulk jAjjI j£ ciîlj Aj (jj a£j öj (jjjl jj Ia öjj AA öj 


; <j jaj 


<html> 

<head> 

<style type="text/css"> 
table,th y td 
{ 

border:2px dotted gray; 

width:300px; 

height:33px; 

text-align:center; 

background-color:blue; 

} 

</style> 

</head> 

<body> 

<table> 
<th>jU </th> 
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Css language 


Ub 


<th>û <k/th> 
<tr> 

<td>Ulû</td> 
<td>^ *</td> 
</tr> 
</table> 
</body> 
</html> 





Ub 

û' <-£ j^' j 
\ 

Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 






Css language 



content 


Aj ûj AjJj AjLgjSj Aj jl£ 4 LV£' J 0 JJ J (J^ J^ Ö J ^ AjLûJÛ a! 4 £ j£ Aj AjLûJÛ Aj 
AjLûJÛ 4 j (J j& <J (Jjjl jJ öû öj (JJjuJ jJJ j , Xj Cljjj AjLoj <>uj j a£ Aj <J jJ jJ Clipjl£ 

^IjJ^ <1 jU \j Û j <U« Ai jL CjjJjI£ Aj Aj ûj jj a£j jjjl jjjU 


hpforp 


ö j! jiuJ ^ Aj JJJJ^J (J jl£ Aj Ij öj 4uud (J^! jJ öû ÖJ AjLûJÛ Aj jA Aj 


p.before 

{ 

Content:" j aj e jJ"; 

} 


| <J jaJ 


<html> 

<head> 

<style type="text/css"> 
p:before 
{ 

content:"û^ J jj^"; 

} 

</style> 

</head> 

<body> 

<p>j^</p> 

</body> 

</html> 

!!! cIjj a£j (jLLuj^jj£ (j <jujjj ^! j^L j a£jj <juj 


; ^L^J Aj 







jUwoj _£ 


after 


duj ^Jj£ Clljj AjLû j£ AjJjuj jj j Aj (jjjl J^ ö J AjLûJÛ ^ Aj j& Aj lA öjj 4A öj 

: O'j^ f ^ 


P:after 

{ 

Content:"Oj^"; 

} 


; <i j^j 


<html> 

<head> 

<style type="text/css"> 
p:after 
{ 

co nte n t : " û^O j^" ; 

} 

</style> 

</head> 

<body> 

<p>jJU</p> 

</body> 

</html> 
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Css language 





active 


ir*Vftn\ j AA j <juj a1 (jl j a£ Aj a£ jj a£j I j jjjI jj öû öj AjLgjû ja <j j JA <j 

jjjj^ ^ 4^-j 6 J L)J 'j (jp'jj 6 ^ 'j 

; <j jaj 


<html> 

<head> 

<style type="text/css"> 
a:active 

{color:green;font-size:33px;} 

</style> 

</head> 

<body> 

<a href="http://www.google.com/">google</a> 

</body> 

</html> 


4A oj jj <juo jj j£ oû <_£ <5 o o j I j Aj j j a£jj] J Auuo >L' g '' j a£ <j IIuojj 

(Jjjjj^ ûj ji AlijjS (j ûjtj <3 Ia öjj 


hover 


a£ <£jjî j <juo o>jjJ jLûJuojLa iiîjjl£ j AA jj A^j Ij jjjl jj oû oj 4 _SLoj3 ^ Aj (J jA <J 

; jj jj5j a5o oj jjjjl jj öJ j^j AjLuolj 
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Css language 




<html> 

<head> 

<style type="text/css"> 
aihover 

{color:green;font-size:33px;} 

</style> 

</head> 

<body> 

<a href="http://www.google.com/">google</a> 

</body> 

</html> 


Css grouping 

A j 4_ui <1 (jLa AA û j jy ASj (_£^IjJ ö j AS Aj Aj ui Jj A^. jjjjl jJ oJ Aajj 

: O'j^ 1 f ^ cr?“ 



j AA jj (_£ _jLp d *' Ö J J L$ jLp 6 J Aj Aj (jLaJjjj (jJJJJ ûJ tiî ûj 

/■)L£iuj 
** ** 

; Aj^j 
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Css language 


Ub 


<html> 

<head> 

<style type="text/css"> 

p,a,hr 

{ 

color:blue; 

background-coloriblack; 

} 

</style> 
</head> 
<body> 
<p>û^jj^</p> 
<a href="http://www.google.com/">google</a> 

<hr> 

</body> 

</html> 



Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 
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Display 


^ ^ ö J Öi *£} (jJ^ c5 j' Û^'j^ ö J 4 jUj3 ^ Aj fj JA 4j 

jl£ <ln>u]jj ^jIAjLoLIJ Jj 4 j Aj C1j AjjIj ^£jjl jJjoî 


none 


öj <jjjLi jLj AjI j jjn J jt^ <Luj jjjI jj <j a£ C1jI£ I j AjLûjû ^ Aj 


öjl jJjoj ^ Aj 


Display:none; 


Aj jaJ 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

display:none; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

</body> 

</html> 


! ^LaL Aj 







CLÛJ jLj^ 4 j ^ y ö jLj*} 4-L)j *lS c*S ö j 


inline 


IAj jlAlj (JiA C^S 4j J 4 uuj <S jLojl^ AjjoJ JJ-ö 4A 4^ C!jI£ I J Aj 


öjl jJjoJ ^ Aj 


Display:inline; 


I <J JjClI 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

displayiinline; 

} 

</style> 

</head> 

<body> 

<p>jU^ûjj£</p> 

<p>jjj£</p> 

</body> 
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</html> 


! ^ 


±J& 


•tSÎ A-j AJ jj-aj Jy 

) Aj jaj 


<html> 

<head> 

<style type="text/css"> 

P 

{ 

text-align:center; 

color:blue; 

background-color:yellow; 

} 

body 

{ 

background-colonblack; 
border:4px inset red; 

} 

</style> 

</head> 

<body> 

<hr> 
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Css language 


Ub 


<p class="a">^ ^ <j </p> 


<hr> 

</body> 

</html> 





<html> 

<head> 

<style type="text/css"> 


p.a 

{ 

text-align:center; 

color:blue; 

background-color:yellow; 
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Css language 


p.b 

{ 

text-align:center; 

color:red; 

} 

p.b:hover 

{ 

color:blue; 

} 

body 

{ 

background-color:black; 
border:4px inset red; 

} 

</style> 

</head> 

<body> 

<hr> 

<p class="a">(» ij Ajj^ </p> 
<p class="b">cij 44 </p> 

<hr> 

</body> 

</html> 








Css language 


Ub 



Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 

www.youtube.com/computersoranu 






Css language 



Aj UIj^jjjuJ ^JJJJJI jJ ^ajUI jJ& A Aj ^jU j£ A-llLalJ <£ öjl jJjoî Aj JJJ Aj JJ <JJji. 

^uuU *Lj jl£ Aj AjU jj-G AA ^ J « ll jJ lA ÖJJ AA öj ^ jud^ AjJ JjLjjl J j CllxJjl J (JjJJJ J jJ 
(J 4 JIj AjIj <S Cluj <J jU£ Aj 4 U j£ ^CJA (J jIjjI J J Clbudjl J (J jJJJ (J Ö jJJ j£Ij A£j ^^uuJ 
(J <Jjj>IJ Ij 4 j b <JJj£ A1 CIujI j£ JjjI-J <£ c^Îjj AjLj j AA öj öjI j£ (JjjLj b 4 jjj£ ^ a! a£ 
^UJ Aj Ia ö j j AA ö j CIjjj jjL^. j Aj <S jLjjI£ Ajjoj jjLjj j ûj <j Jj öjI jjb j a£<J 

jjUb jj jLûjolijL^ Aj jaj jj-ö aj ^ 


<S c^Sjuj j AA Al jLj a£ Aj AjLj ^-L^j£ JjjLj a! C * vh AJb jLa£ 4 jjj£ j 4£ j AA j 4£ AÎi öj 
j ûj Aj jj ö j Aj a£j e jbl£U j a£ Aj ^j (JL^uui ji. öj (j^)jj^ jUij ^jbl j^ lj U a \ y£ ^ 

öj Aij Aj öjUjj^ AjV AA öjj^. Aj jjjIaU ^jl£ A^a AJb J <J <S 


CljjuaJj <Juj jk j JJjU (J ö Jjj jJ jl 4 j^£ ^ Aj ^IjI jJ ^xjI J ö^ jL^uuJ jk Aj ji. jjj ÖJ 

jUilî A. J öj djjj Aj Aj AjLj jLj A £ J öj Aj jj jLlLuJ ö^ J Aj ^ ^ j a£j Ö^LûLj 
AJb j Aj j£J 4j j^j^Iujjj^ djjLuj 4-yj (^ öjLj <S djjjU ^ aa j Aj Ij^ Aj a£ ^ ö^ ö^ ^ 

jUJ j£ ^L£ ^JJ <J 4-J <£ ö^ Ö^LgU jj jLLuoJJJ 


öjLjjjuiJj j Aj^. öj jjIjj ö^ öj dî ^Lj a! 4Jb j AJb jj jjjj^ jLaj ^»jbl jjA öjUjj^ IajU j£ a! 

AjULuojj jU ^ A j jj j jjij jUjI£ 

jj^llj-i^a Ub; j 4 uujjjj 

jl j jxj ; j£jlj 

'I • 1 V ^jU : Jl. 


Blue.dana66@yahoo.com 

Dana.computer92@gmail.com 

Facebook.com/2292.hard.way 






